<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打开关闭事件</title>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {

            $("#mydiv2").toggle(
                    function () {
                        $(this).addClass("a");//添加一个className
                        $(this).removeClass("e");//删除一个className
                    },
                    function () {
                        $(this).addClass("b");
                        $(this).removeClass("a");
                    },
                    function () {
                        $(this).addClass("c");
                        $(this).removeClass("b");
                    },
                    function () {
                        $(this).addClass("d");
                        $(this).removeClass("c");
                    },
                    function () {
                        $(this).addClass("e");
                        $(this).removeClass("d");
                    }
            );


            $("#mydiv").hover(
                    function () {
                        $(this).removeClass("a");
                        $(this).addClass("b");
                    },
                    function () {
                        $(this).removeClass("b");
                        $(this).addClass("a");
                    }
            );


            $("#b2").click(function(){
                //一次性的事件
                $("#b1").one("click",function(){
                    alert("我现在有事了");
                });
            });
            $("#b3").click( function () {
                $("#b1").off("click");
            });
        });
    </script>
    <style>
        div  {
            border: solid #8d1eff 1px;
            width: 200px;
            height:200px;
        }
        .a{
            background-color: #8d1eff;
        }
        .b{
            background-color: #ff9988;
        }
        .c{
            background-color: #4effb8;
        }
        .d{
            background-color: #51cc18;
        }
        .e{
            background-color: #fff246;
        }
    </style>
</head>
<body>
<div id="mydiv2" class="a">

</div>
<div id="mydiv" class="a">

</div>
<br>

<button id="b2">开启事件</button>
<button id="b3">终止事件</button>
<br>
<br>
<br>
<button id="b1">触发事件</button>
</body>
</html>